<script setup>
import SearchForm from '@/components/Search-Form.vue'
import TableBase from '@/components/Table-Base.vue'
import TablePagination from '@/components/Table-Pagination.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { MessagePlugin } from 'tdesign-vue-next'
import { delAlarmItem, getAlarmList } from '@/api/alarm'
import MainContent from '@/components/Main-Content.vue'

const router = useRouter()
const handleStatusMap = {
    0: '未派单',
    1: '已派单',
    2: '已接单',
    3: '已完成',
}
const formData = ref({
    poleName: '',
    poleNumber: '',
    handleStatus: ''
})
const query = ref({
    page: 1,
    pageSize: 10
})
const listData = ref({
    list: [],
    total: 0
})
const columns = ref([
    {
        title: '序号',
        colKey: 'serial-number',
        width: 80
    },
    {
        title: '一体杆名称',
        colKey: 'poleName',
        width: 200
    },
    {
        title: '一体杆编号',
        colKey: 'poleNumber',
        'min-width': 150
    },
    {
        title: '故障类型',
        colKey: 'errorType'
    },
    {
        title: '处置状态',
        colKey: 'handleStatus'
    },
    {
        title: '告警时间',
        colKey: 'warningTime'
    },
    {
        title: '操作',
        colKey: 'option',
        width: 180
    }
])

const search = async () => {
    const params = JSON.parse(JSON.stringify(formData.value))
    if (params.handleStatus === '-1') params.handleStatus = null
    const res = await getAlarmList({
        ...query.value,
        ...params
    })
    listData.value.list = res.data.rows.map(e => {
        e.handleStatus = handleStatusMap[e.handleStatus]
        return e
    })
    listData.value.total = res.data.total
}
const reset = () => {
    formData.value = {
        poleName: '',
        poleNumber: '',
        handleStatus: ''
    }
    search()
}
const getRow = async (data, type) => {
    if (type === 'del') {
        const res = await delAlarmItem(data.row.id)
        if (res.code === 10000) {
            await MessagePlugin.success('删除成功!')
            if (listData.value.list.length === 1 && query.value.page > 1) query.value.page--
            await search()
        } else {
            await MessagePlugin.error(res.msg)
        }
    } else if (type === 'view') {
        await router.push('/railing/alarm/detail?id=' + data.row.id)
    }
}
const changePage = e => {
    query.value.page = e.current
    query.value.pageSize = e.pageSize
    search()
}

search()
</script>

<template>
    <main-content>
        <search-form>
            <t-form
                ref="form"
                :data="formData"
                label-width="auto"
                layout="inline"
            >
                <t-form-item label="一体杆名称">
                    <t-input v-model.trim="formData.poleName" placeholder="请输入一体杆名称"></t-input>
                </t-form-item>

                <t-form-item label="一体杆编号">
                    <t-input v-model.trim="formData.poleNumber" placeholder="请输入一体杆编号"></t-input>
                </t-form-item>

                <t-form-item label="处置状态">
                    <t-select
                        placeholder="请选择处置状态"
                        v-model.trim="formData.handleStatus"
                        showArrow>
                        <t-option key="-1" label="全部" value="-1"/>
                        <t-option key="0" label="未派单" value="0"/>
                        <t-option key="1" label="已派单" value="1"/>
                        <t-option key="2" label="已接单" value="2"/>
                        <t-option key="3" label="已完成" value="3"/>
                    </t-select>
                </t-form-item>

                <t-form-item style="min-width: auto">
                    <t-button @click="search" type="submit" style="margin-right: 10px;">查询</t-button>
                    <t-button @click="reset" variant="outline">重置</t-button>
                </t-form-item>
            </t-form>
        </search-form>

        <table-base :columns="columns" :list="listData.list">
            <template #option-table="row">
                <t-button variant="text" theme="primary" @click="getRow(row, 'allot')" disabled>派单</t-button>
                <t-button variant="text" theme="primary" @click="getRow(row, 'view')">详情</t-button>
                <t-popconfirm
                    destroyOnClose
                    showArrow
                    @confirm="getRow(row, 'del')"
                    theme="warning" content="确认删除吗">
                    <t-button variant="text" theme="primary">删除</t-button>
                </t-popconfirm>
            </template>
        </table-base>

        <table-pagination :total="listData.total" @changePage="changePage"></table-pagination>
    </main-content>
</template>

<style scoped lang="scss">
</style>
